const vw = window.innerWidth;
const vh = window.innerHeight;
const canvas = document.querySelector('#gameCanvas');
let cw = canvas.width = vw / 1.5;
let ch = canvas.height = vh / 1.1;
const ctx = canvas.getContext('2d');
let mark = 0;

//恐龙(玩家操控的角色)
class Dinosaur {
    constructor() {
        this.image = new Image();
        this.image.src = './img/kl.svg';
        this.x = 50;
        this.y = 450;
        this.defaulty = 450;
        this.jumph = 400;
        this.width = 80;
        this.height = 80;
        this.gravity = 0.2;
        this.velocityY = 0;
    }

    draw() {
        // ctx.fillStyle = '#000';
        // ctx.fillRect(this.x, this.y, this.width, this.height);
        ctx.drawImage(this.image, this.x, this.y, this.width, this.height)
    }

    update() {
        if (this.y < this.defaulty) {
            this.y += this.velocityY;
            this.velocityY += this.gravity;
        } else {
            this.y = this.defaulty;
            this.velocityY = 0;
        }
    }

    jump() {
        if (this.y === this.defaulty) {
            this.y = this.jumph;
            this.velocityY = -10;
            console.log('跳')
        }
    }
}

//石头（障碍物）
class Cactus {
    constructor() {
        this.image = new Image();
        this.image.src = './img/st.svg';
        this.x = cw;
        this.y = 450;
        this.width = 70;
        this.height = 70;
        this.speed = -3;
        this.speedIncrement = 0.001;
    }

    draw() {
        // ctx.fillStyle = '#000';
        // ctx.fillRect(this.x, this.y, this.width, this.height);
        ctx.drawImage(this.image, this.x, this.y, this.width, this.height)
    }

    update() {
        this.x += this.speed;
        this.speed -= this.speedIncrement;
        if (this.x + this.width < 0) {
            this.x = cw;
            mark++;
        }
    }
}

// 背景
let imagels = ['./img/bj1.webp', './img/bj2.webp'];

class Background {
    constructor() {
        this.image = new Image();
        this.image.src = imagels[0];
        this.speed = 2;
        this.speedIncrement = 0.001;
        this.x = 0;
        this.y = 0;
        this.width = canvas.width;
        this.height = canvas.height;
    }

    changeImage(newImageSrc) {
        this.image.src = newImageSrc;
    }

    draw() {
        ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
        ctx.drawImage(this.image, this.x + this.width, this.y, this.width, this.height);
    }

    update() {
        this.x -= this.speed;
        this.speed += this.speedIncrement;
        if (this.x <= -this.width) {
            this.x = 0;
        }
    }
}

// 创建对应类的实例
const background = new Background();
const dinosaur = new Dinosaur();
const cactus = new Cactus();
//res：玩家碰到仙人掌为true否则false
let res = false;

// 碰撞判断和展示分数
function detection() {
    if (dinosaur.x < cactus.x + cactus.width &&
        dinosaur.x + dinosaur.width > cactus.x &&
        dinosaur.y < cactus.y + cactus.height &&
        dinosaur.y + dinosaur.height > cactus.y) {
        console.log('碰到了')
        res = true;
        // alert(`你的分数为：${mark}，游戏结束`);
        driverObj.highlight({
            popover: {
                description: `<span style='display: block;text-align: center;font-size: 1rem'>你的分数为：${mark}，继续努力，再来一局吧</span>`,
            }
        })
        resetgame();
    }
}

// 游戏循环
function gameLoop() {
    if (res) return;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    background.update();
    background.draw();
    dinosaur.update();
    cactus.update();
    dinosaur.draw();
    cactus.draw();

    detection();

    ctx.font = '25px 微软雅黑';
    ctx.fillStyle = '#000';
    ctx.fillText(`分数：${mark}`, 10, 30);

    requestAnimationFrame(gameLoop);
}

//监听画布被点击事件
canvas.addEventListener('click', function () {
    dinosaur.jump();

})
//监听键盘事件
document.addEventListener('keydown', (e) => {
    if (e.key === ' ') {
        dinosaur.jump();
    }
});


// 动态计算恐龙石头高度和跳跃高度
function dt() {
    const roadHeightbl = 0.45;
    const bgRoadHeight = background.height * roadHeightbl;
    const roadCenterY = ch - (bgRoadHeight / 2);
    dinosaur.y = roadCenterY - dinosaur.height;
    dinosaur.defaulty = roadCenterY - dinosaur.height;
    dinosaur.jumph = dinosaur.y * 0.8;
    cactus.y = roadCenterY - cactus.height;
}

dt()

//重置游戏所有值
function resetgame() {
    res = true;
    dinosaur.y = dinosaur.defaulty;
    dinosaur.velocityY = 0;
    cactus.x = cw;
    cactus.speed = -3;
    background.speed = 2;
    mark = 0;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // gameLoop();
    gobtn.disabled = false;
    resetbtn.disabled = true;
    setTimeout(() => {
        res = false;
    }, 100)
}

//开始游戏按钮设置
const gobtn = document.querySelector('.rungame')
gobtn.addEventListener('click', () => {
    gobtn.disabled = true;
    resetbtn.disabled = false;
    gameLoop();
})
//重置游戏按钮设置
const resetbtn = document.querySelector('.resetgame')
resetbtn.addEventListener('click', () => {
    resetgame();
})

const cjs = document.querySelectorAll('.cj');
cjs.forEach(function (e, key) {
    e.addEventListener('click', function () {
        background.changeImage(imagels[key])
    })
})
